<template>
	<view class="plan">
		<u-navbar bgColor="#fff">
			<view slot="left" class="align-center">
				<image @click="$tools.back()" src="@/static/login/back3.png" style="width: 36rpx; height: 36rpx">
				</image>
			</view>
			<view slot="center">
				<view style="font-weight: 600; font-size: 36rpx; color: #333333">基地信息</view>
			</view>
		</u-navbar>
		<!--  -->
		<view v-if="status == 2">
			<view style="border-bottom: 1rpx solid #eeeeee; margin-bottom: 30rpx">
				<view style="font-weight: 300; font-size: 24rpx; color: #333333">基地名称</view>
				<view class="flex-between1" style="margin-bottom: 14rpx; padding: 10rpx 0 30rpx 0">
					<input v-model="form.name" type="text" placeholder="请输入" style="font-size: 28rpx; color: #333333" />
					<image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx"></image>
				</view>
			</view>
			<view style="border-bottom: 1rpx solid #eeeeee; margin-bottom: 30rpx">
				<view style="font-weight: 300; font-size: 24rpx; color: #333333">所在位置</view>
				<view class="flex-between1" style="margin-bottom: 14rpx; padding: 10rpx 0 30rpx 0">
					<input v-model="form.address" type="text" placeholder="请输入"
						style="font-size: 28rpx; color: #333333" />
					<image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx"></image>
				</view>
			</view>
			<!-- <view style="border-bottom: 1rpx solid #eeeeee; margin-bottom: 30rpx">
				<view style="font-weight: 300; font-size: 24rpx; color: #333333">特色</view>
				<view class="flex-between1" style="margin-bottom: 14rpx; padding: 10rpx 0 30rpx 0">
					<input type="text" placeholder="请输入" style="font-size: 28rpx; color: #333333" />
					<image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx"></image>
				</view>
			</view> -->
			<!-- <view style="border-bottom: 1rpx solid #eeeeee; margin-bottom: 30rpx">
				<view style="font-weight: 300; font-size: 24rpx; color: #333333">住宿设施</view>
				<view class="flex-between1" style="margin-bottom: 14rpx; padding: 10rpx 0 30rpx 0">
					<input type="text" placeholder="请输入" style="font-size: 28rpx; color: #333333" />
					<image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx"></image>
				</view>
			</view> -->
			<view style="border-bottom: 1rpx solid #eeeeee; margin-bottom: 30rpx">
				<view style="font-weight: 300; font-size: 24rpx; color: #333333">联系电话</view>
				<view class="flex-between1" style="margin-bottom: 14rpx; padding: 10rpx 0 30rpx 0">
					<input v-model="form.phone" type="text" placeholder="请输入"
						style="font-size: 28rpx; color: #333333" />
					<image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx"></image>
				</view>
			</view>
			<!-- <view style="border-bottom: 1rpx solid #eeeeee; margin-bottom: 30rpx">
				<view style="font-weight: 300; font-size: 24rpx; color: #333333">订房须知</view>
				<view class="flex-between1" style="margin-bottom: 14rpx; padding: 10rpx 0 30rpx 0">
					<input v-model="form.notice" type="text" placeholder="请输入" style="font-size: 28rpx; color: #333333" />
					<image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx"></image>
				</view>
			</view> -->
			<view style="border-bottom: 1rpx solid #eeeeee; margin-bottom: 30rpx">
				<view style="font-weight: 300; font-size: 24rpx; color: #333333; margin-bottom: 30rpx">基地照片</view>
				<!-- <view class="flex-between1" style="margin-bottom: 14rpx; padding: 10rpx 0 30rpx 0">
					<input type="text" placeholder="请输入" style="font-size: 28rpx; color: #333333" />
					<image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx"></image>
				</view> -->
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="10" width="164" height="164" uploadIcon="plus"></u-upload>
			</view>
			<view style="padding: 30rpx 0">
				<view style="font-weight: 600; font-size: 24rpx; color: #333333; margin-bottom: 30rpx">请点击选择</view>
				<view class="flex" style="margin-bottom: 60rpx">
					<view class="flex-column flex-center" style="width: 120rpx">
						<image src="@/static/putup/zs1.png" style="width: 40rpx; height: 44rpx"></image>
						<view style="font-weight: 600; font-size: 24rpx; color: #333333">卧室</view>
						<view style="font-weight: 600; font-size: 24rpx; color: #333333">设施</view>
					</view>
					<view class="flex-wrap" style="flex: 1">
						<view class="align-center" @click="changetype(item)" v-for="(item, index) in list" :key="index"
							style="width: 33%; margin-bottom: 28rpx">
							<u-icon v-if="item.type" name="checkmark"></u-icon>
							<u-icon v-else name="close" color="#999999"></u-icon>
							<text :class="item.type ? 'text1' : 'text2'">{{ item.name }}</text>
						</view>
					</view>
				</view>
				<view class="flex">
					<view class="flex-column flex-center" style="width: 120rpx">
						<image src="@/static/putup/zs1.png" style="width: 40rpx; height: 44rpx"></image>
						<view style="font-weight: 600; font-size: 24rpx; color: #333333">公众</view>
						<view style="font-weight: 600; font-size: 24rpx; color: #333333">设施</view>
					</view>
					<view class="flex-wrap" style="flex: 1">
						<view @click="changetype1(item)" class="align-center" v-for="(item, index) in list1"
							:key="index" style="width: 33%; margin-bottom: 28rpx">
							<u-icon v-if="item.type" name="checkmark"></u-icon>
							<u-icon v-else name="close" color="#999999"></u-icon>
							<text :class="item.type ? 'text1' : 'text2'">{{ item.name }}</text>
						</view>
					</view>
				</view>
			</view>
			<view style="margin-bottom: 50rpx">
				<view style="font-weight: 600; font-size: 24rpx; color: #333333; margin-bottom: 30rpx">特色</view>
				<view class="flex-between1" style="margin-bottom: 30rpx">
					<input type="text" v-model="form.featurelist" placeholder="请输入6个字以内"
						style="font-weight: 400; font-size: 28rpx; color: #aaaaaa; padding: 16rpx 22rpx; width: 500rpx; background: #f5f6fa; border-radius: 8rpx" />
					<view @click="
							clickAdd()
						" class="flex-center1"
						style="width: 124rpx; height: 72rpx; background: #1365f9; border-radius: 8rpx; font-weight: 600; font-size: 28rpx; color: #ffffff">
						添加
					</view>
				</view>
				<view class="flex-wrap">
					<view class="flex-center1" @click="form.feature.splice(index, 1)"
						v-for="(item, index) in form.feature" :key="index"
						style="margin: 0 20rpx 20rpx 0; width: 202rpx; height: 76rpx; background: rgba(19, 101, 249, 0.1); border-radius: 8rpx; font-size: 28rpx; color: #1365f9">
						{{ item }}
					</view>
				</view>
			</view>
			<view style="margin-bottom: 50rpx">
				<view style="font-weight: 600; font-size: 24rpx; color: #333333; margin-bottom: 30rpx">订房须知</view>
				<u--textarea v-model="form.notice" placeholder="请输入内容" height="400" count></u--textarea>
			</view>
			<view class="flex-center1" style="margin-bottom: 20rpx">
				<view @click="apply" class="flex-center1"
					style="font-weight: 600; font-size: 32rpx; color: #ffffff; width: 640rpx; height: 96rpx; background: #1365f9; border-radius: 16rpx">
					保存
				</view>
			</view>
			<view class="flex-center1">
				<view @click="setsf(1)" class="flex-center1"
					style="font-weight: 600; font-size: 32rpx; color: #ffffff; width: 640rpx; height: 96rpx; background: #1365f9; border-radius: 16rpx">
					返回
				</view>
			</view>
		</view>
		<view v-if="status == 0">
			<view class="flex-center1" style="margin-bottom: 58rpx">
				<image src="@/static/index/sm.png" style="width: 440rpx; height: 362rpx"></image>
			</view>
			<view style="margin-bottom: 26rpx; text-align: center; font-weight: 600; font-size: 32rpx; color: #242424">
				恭喜您！基地信息提交成功</view>
			<view style="text-align: center; font-weight: 300; font-size: 28rpx; color: #666666; margin-bottom: 20rpx">
				等待工作人员审核，审核周期1-3个工作日</view>
			<view class="flex-center1">
				<view @click="setsf(1)" class="flex-center1"
					style="font-weight: 600; font-size: 32rpx; color: #ffffff; width: 640rpx; height: 96rpx; background: #1365f9; border-radius: 16rpx">
					返回
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '',
				fileList1: [],
				list: [{
						name: '电视',
						type: false
					},
					{
						name: '空调',
						type: false
					},
					{
						name: '衣柜',
						type: false
					},
					{
						name: '床',
						type: false
					},
					{
						name: '卫生间',
						type: false
					},
					{
						name: '智能门锁',
						type: false
					},
					{
						name: '阳台',
						type: false
					},
					{
						name: '暖气',
						type: false
					}
				],
				list1: [{
						name: '冰箱',
						type: false
					},
					{
						name: '洗衣机',
						type: false
					},
					{
						name: '热水器',
						type: false
					},
					{
						name: '宽带',
						type: false
					},
					{
						name: '沙发',
						type: false
					},
					{
						name: '油烟机',
						type: false
					},
					{
						name: '燃气灶',
						type: false
					},
					{
						name: '可做饭',
						type: false
					},
					{
						name: '电磁炉',
						type: false
					},
					{
						name: '微波炉',
						type: false
					},
					{
						name: '橱柜',
						type: false
					}
				],
				form: {
					name: '',
					address: '',
					feature: [],
					featurelist: '',
					bedroom: '',
					phone: '',
					notice: '',
					image: '',
					bedroom: '',
					publicInfo: ''
				},
				status: ''
			};
		},
		onLoad() {
			this.getsq();
		},
		methods: {
			clickAdd() {
				if (!this.form.featurelist) {
					uni.showToast({
						title: '请输入特色',
						duration: 2000,
						icon: "none"
					})
					return;
				}
				if (this.form.featurelist.length > 6) {
					uni.showToast({
						title: '最多输入6个字',
						duration: 2000,
						icon: "none"
					})
					return;
				}
				this.form.feature.push(this.form.featurelist);
				this.form.featurelist = '';
			},
			apply() {
				this.$request('front/home/apply', this.form).then((res) => {
					console.log(res, '申请');
					if (res.code == 0) {
						this.$tools.toast('操作成功');
						this.getsq();
					}
				});
			},

			getsq() {
				this.$request('front/home/getApply').then((res) => {
					console.log(res, '查询');
					this.status = res.obj;
					if (this.status == 1) {
						this.$tools.navigite('./index');
					}
				});
			},
			changetype(item) {
				const list = [];
				item.type = !item.type;
				this.list.map((item, index) => {
					if (item.type) {
						list.push(index);
					}
				});
				this.form.bedroom = list.join(',');
				console.log(this.form.bedroom);
			},
			changetype1(item) {
				const list = [];
				item.type = !item.type;
				this.list1.map((item, index) => {
					if (item.type) {
						list.push(index);
					}
				});
				this.form.publicInfo = list.join(',');
				console.log(this.form.publicInfo);
			},
			setimg(event, key) {
				const list = [];
				this[`fileList${event.name}`].map((item, index) => {
					list.push(item.url);
				});
				const fileList1str = list.join(',');
				this.form.image = fileList1str;
				console.log(this.form.image, 'image');
			},
			setsf(index) {
				this.$store.commit('setidentity', index);
				this.$tools.navigiteTo('/pages/index/index');
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
				this.setimg(event);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						})
					);
					fileListLen++;
				}
				this.setimg(event);
			}
		}
	};
</script>

<style lang="less" scoped>
	.plan {
		padding: 180rpx 32rpx;

		.text1 {
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
		}

		.text2 {
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
		}
	}
</style>